<template>
  <div>
    <div>
    <h1 style="float: left;margin-left:50px">单类产品数据</h1>
      <div id="report" style="width: 700px; height: 350px; float: left;margin-top:80px;"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons");
export default {
  name: "",
  data() {
    return {
      charts: "",
      score: "100",
      source: [
        ["类型", "卖出", "库存"],
        ["服装", 4500, 1200],
        ["家庭用品", 3000, 1500],
        ["电子产品", 4500, 800],
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.draw("report");
    });
  },
  methods: {
    draw(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: this.source, //连接数据
        },
        //x轴
        xAxis: { type: "category" },
        //y轴
        yAxis: { },
        grid: { bottom: 30 },
        series: [
          {
            type: "bar", //表示这个是柱状图
            barCategoryGap: "40%",
            itemStyle: { color: "#999" }, //定义颜色
            tooltip: {
              formatter: (params) => {
                //console.log(params)   打印这个params,按自己需要拼接字符串
                return ` ${params.value[0]} <br/>
                         ${params.seriesName}:${params.value[1]}`;
              },
            },
          },
          {
            type: "bar",
            barCategoryGap: "40%",
            itemStyle: { color: "#81cebe" },
            tooltip: {
              formatter: (params) => {
                return ` ${params.value[0]} <br/>
                         ${params.seriesName}:${params.value[2]}`;
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style>
</style>
